<!DOCTYPE html>
<html lang="en" class="gr__semantic-ui_cn">
<head>
    <meta charset="UTF-8">
    <title>D3 cloud</title>
    <link rel="stylesheet" type="text/css" href="./front/css/semantic.css">

    <script src="./front/js/jquery.min.js"></script>
    <style>
        h1.ui.center.header {
            margin-top: 3em;
        }

        .ui .segments {
            width: 500px;
            height: 280px;
            margin: 10px auto;
        }

        .vis {
            height: 280px;
            text-align: center;
        }

        .vis img {
            width: 100%;
        }
    </style>
</head>
<body>
<h1 class="ui center aligned header">词云生成器</h1>
<div class="ui container">
    <div class="ui form">
        <div class="field">
            <textarea id="words" name="words" placeholder="请输入文字~"></textarea>
        </div>
        <button class="fluid ui teal button" id="sub">生成词云</button>
    </div>

    <div class="ui segments" id="vis-con" style="display: none;">
        <div class="vis">
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#sub').click(function () {
            var words = $('#words').val();
            if (!words) {
                alert('文字内容不能为空~');
                return false;
            }
            $('.vis').html('');
            $.post("http://localhost:8000/getWords.json", {
                words: words
            }, function (result) {
                $('#vis-con').show();
                $('.vis').html('<img src="' + result.url + '" id="img" alt="">');
            });
        });
    });
</script>
</body>
</html>
